<!-- 模版 (html代码) -->
<template>
	<!-- 根标签, 只有一个 -->
	<section>

		<!-- 工具条: 高级查询 + 新增 -->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true">
				<el-form-item>
					<el-input v-model="keyword" placeholder="请输入日志关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" v-on:click="keywordQuery">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--
			el-table: 表格
			:data="tableDatas": 绑定表格要显示的数据
			v-loading="listLoading": 加载框, 默认值false, 关闭状态
			@selection-change="handleSelectionChange": 选项 (选择勾选时)改变时会触发 (批量删除会用)
			highlight-current-row: 当前行高亮展示
			type="selection": 多选框
			type="index": 序号, 从1开始计算
			prop: 对应列内容的字段名 (实体类的字段名), 也可以使用property属性

			跨页批量删除属性
			:row-key="getRowKeys": 行数据的Key, 用来优化Table的渲染, 在使用reserve-selection功能与显示树形数据时, 该属性是必填的,
			能够拿到对应的选中的id并且返回出去
			row-key属性实际的作用是标识表格每行数据是通过哪个属性来进行区别的, 一般而言id比较常见
			绑定了row-key属性后, 即便跨页, 由于不同页数据的id不同, 因此组件依然可以进行区分从而实现记忆

			:reserve-selection="true": 仅对type=selection的列有效, 类型为Boolean, 为true则会在数据更新之后保留之前选中的数据 (需指定row-key)
			ref="table": 给表格取别名, 到时候可以用于多选表格, 清空日志的选择

		-->
		<el-table :data="tableDatas" v-loading="listLoading" @selection-change="handleSelectionChange" highlight-current-row
			style="width: 100%;" :row-key="getRowKeys" ref="table">
			<!-- 多选框 -->
			<el-table-column type="selection" width="55" :reserve-selection="true">
			</el-table-column>
			<el-table-column type="index" width="70" label="序号">
			</el-table-column>
			<el-table-column prop="userId" label="用户编号" width="100">
			</el-table-column>
			<el-table-column prop="userName" label="用户姓名" width="100">
			</el-table-column>
			<el-table-column prop="createTime" label="创建日期" width="200" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="className" label="类名" width="150" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="methodName" label="方法名" width="150" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="methodParams" label="方法参数" width="150" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="returnValue" label="返回值" width="150" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="costTime" label="花费时间" width="100">
			</el-table-column>
			<el-table-column prop="ip" label="ip地址" width="150">
			</el-table-column>
			<el-table-column label="操作" width="200">
				<!-- scope.row表示当前行对象 -->
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--工具条: 批量删除 + 分页栏-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" :disabled="this.sels.length === 0" @click="handlePatchDel">批量删除</el-button>

			<!-- 
				@size-change="handleSizeChange": 每页显示条数改变事件
				@current-change="handleCurrentChange": 当前页改变事件
				:current-page="currentPage": 属性绑定, 当前页
				:page-sizes="pageSizes": 属性绑定, 每页显示条数选择框
				:page-size="pageSize": 每页显示条数
				layout="total, sizes, prev, pager, next, jumper": 分页栏布局
				:total="totals": 属性绑定, 总条数
				style="float:right;": 右边
																			-->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
				:page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="totals" style="float:right;">
			</el-pagination>
		</el-col>

		<!-- 添加或修改界面 -->
		<!-- 
			:visible.sync="saveFormVisible": 控制当前对话框是否展示, 默认关闭 (false)
			:close-on-click-modal="false": 点击对话框外不关闭对话框
			:model="saveForm": 表单数据对象
			label-width="80px": 表单域标签的宽度
			:rules="saveFormRules": 表单项校验规则
			ref="saveForm": 给表单取一个别名, 到时可以通过这个别名定位当前表单做表单校验
								 -->
		<el-dialog title="保存日志" :visible.sync="saveFormVisible" :close-on-click-modal="false">
			<el-form :model="saveForm" label-width="80px" :rules="saveFormRules" ref="saveForm">
				<el-form-item label="用户编号" prop="userId">
					<el-input v-model="saveForm.userId" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="用户姓名" prop="userName">
					<el-input v-model="saveForm.userName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="类名">
					<el-input v-model="saveForm.className" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="方法名">
					<el-input v-model="saveForm.methodName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="方法参数">
					<el-input v-model="saveForm.methodParams" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="返回值">
					<el-input v-model="saveForm.returnValue" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="花费时间">
					<el-input v-model="saveForm.costTime" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="ip地址">
					<el-input v-model="saveForm.ip" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="saveFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="saveSubmit">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>

export default {
	// 数据
	data() {
		return {
			// 1. 分页查询相关数据

			totals: 0, // 总记录条数
			currentPage: 1, // 当前页, 要传递到后台的
			pageSize: 5, // 每页显示多少条
			pageSizes: [5, 10, 20, 30, 50, 100, 200], // 每页显示条数选择框
			tableDatas: [], // 表格要显示的数据都在这个数组里面, 后端传过来的数据 (对象)放进去
			listLoading: false, // 加载框, 默认false关闭

			// 2. 高级查询相关数据

			keyword: '', // 关键字

			// 3. 删除相关数据

			// 4. 批量删除相关数据

			sels: [],  // 存储多选记录, sels为空那么批量删除禁用状态, sels不为空那么批量删除可以状态

			// 5. 添加和修改相关数据

			saveFormVisible: false, // 添加或修改对话框默认关闭
			saveForm: { // 表单数据对象, 表单的数据都存在这个对象里面
				id: null,
				userId: null,
				userName: '',
				createTime: null,
				className: '',
				methodName: '',
				methodParams: '',
				returnValue: '',
				costTime: null,
				ip: ''
			},

			// 6. 添加和修改校验规则-表单项校验
			saveFormRules: {
				userId: [
					{ required: true, message: '请输入用户编号', trigger: 'blur' }
				],
				userName: [
					{ required: true, message: '请输入用户姓名', trigger: 'blur' }
				],
			},

		}
	},

	// 方法
	methods: {
		// 1. 分页查询相关方法

		// 1.1. 获取列表数据
		getTableData() {
			// 定义参数
			let params = {
				"currentPage": this.currentPage,  // 当前页
				"pageSize": this.pageSize, // 每页显示条数
				"keyword": this.keyword.trim() // 关键字
			}
			// post请求
			this.$http.post("/logs", params).then(res => { // 将后端响应的参数封装到res里面的data里面
				// 异步请求发送成功
				// 给表格数据赋值
				this.tableDatas = res.data.list; // list是后端PageInfo里面的list
				// 给总条数赋值
				this.totals = res.data.total; // total是后端PageInfo里面的total
			}).catch(res => {
				// 异步请求发送失败
				this.$message.error("系统繁忙, 请稍后再试! [400, 404]")
			})
		},

		// 1.2. 选择第几页时触发
		handleCurrentChange(currentPage) { // 当前页是多少, currentPage就是多少
			// 重新给当前页赋值
			this.currentPage = currentPage;
			// 重新获取列表数据
			this.getTableData();
		},

		//1.3. 选择每页显示记录条数时触发
		handleSizeChange(pageSize) { // 每页显示条数是多少, pageSize就是多少
			// 重新给每页显示条数赋值
			this.pageSize = pageSize;
			// 重新获取列表数据
			this.getTableData();
		},

		//2.高级查询相关方法
		keywordQuery() {
			// 重新给当前页赋值 (高级查询需要返回第一页, yml有配置当当前页大于实际的页数就返回最大页, 下面这句代码可以不写)
			this.currentPage = 1;
			// 重新获取列表数据
			this.getTableData();
		},

		//3. 删除相关方法
		handleDel(row) {
			this.$confirm('您确认要删除这一条数据吗?', '温馨提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => { // 确认
				this.$http.delete("/logs/" + row.id).then(res => {
					// 异步请求成功
					if (res.data.success) {
						this.$message.success("删除成功");
						// 重新获取列表数据
						this.getTableData();
					} else { // 请求成功, 但是删除失败
						this.$message.error("系统繁忙, 请稍后再试! [500]");
					}
				}).catch(res => {
					// 请求失败
					this.$message.error("系统繁忙, 请稍后再试! [400, 404]")
				})
			}).catch(() => { // 取消
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},


		// 4. 批量删除相关方法

		// 4.1. 选项改变时触发
		handleSelectionChange(val) { // val是选中的对象组成的数组, 选中多少就要多少个对象在这个val数组里面
			// 给this.sels赋值, 让批量删除按钮可用
			this.sels = val
		},

		// 4.2. 批量删除
		handlePatchDel() {
			// 遍历this.sels数组, 并将this.sels数组里面的每一个选中对象的id取出来装到arr数组里
			var arr = this.sels.map(obj => obj.id);
			this.$confirm('您确认要删除选中的数据吗?', '温馨提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => { // 确认
				this.$http.patch("/logs", arr).then(res => {
					// 请求成功
					if (res.data.success) {
						this.$message.success("删除成功");
						// 用于多选表格，清空日志的选择
						this.$refs.table.clearSelection();
						// 重新获取列表数据
						this.getTableData();
					} else { // 请求成功, 但是删除失败
						this.$message.error("系统繁忙, 请稍后再试! [500]");
					}
				}).catch(res => {
					// 请求失败
					this.$message.error("系统繁忙, 请稍后再试! [400, 404]")
				})
			}).catch(() => { // 取消
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},

		// 5.添加和修改相关方法

		// 5.1. 点击添加弹出对话框
		handleAdd() {
			// 展示添加界面
			this.saveFormVisible = true;

			// 清空表单数据
			// this.saveForm = {};

			// 清空表单数据
			this.saveForm = {
				id: null,
				userId: null,
				userName: '',
				createTime: null,
				className: '',
				methodName: '',
				methodParams: '',
				returnValue: '',
				costTime: null,
				ip: ''
			}
			// 清除表单校验
			this.$refs.saveForm.clearValidate();
		},

		// 5.2. 点击修改弹出对话框
		handleEdit(row) {
			// 展示添加界面
			this.saveFormVisible = true;
			// 回显表单数据, 如果是this.saveForm = row (row = this.saveForm), 即在改变this.saveForm的数据时, row表示当前行对象 (当前行数据)也会改变
			this.saveForm = Object.assign({}, row); // 拷贝到空对象, 在将这个对象的数据赋值给this.saveForm, 那么就和row没得关联, 就能防止修改新的数据影响列表的数据
			// 清除表单校验
			this.$refs.saveForm.clearValidate();
		},

		// 5.3. 提交表单数据操作数据库
		saveSubmit() {
			// 开启表单校验
			this.$refs.saveForm.validate((valid) => {
				if (valid) { // 校验通过
					this.$http.put("/logs", this.saveForm).then(res => {
						if (res.data.success) { // 请求成功
							this.$message.success("操作成功");
							// 判断是否是新增
							if (this.saveForm.id == null) {
								// 总条数+1
								this.totals = this.totals + 1;
								// 跳转到最后一页
								this.currentPage = Math.ceil(this.totals / this.pageSize);
							}
							// 重新获取列表数据
							this.getTableData();
						} else { // 请求成功, 但是新增或修改失败
							this.$message.error("系统繁忙, 请稍后再试! [500]");
						}
						// 关闭添加或修改界面
						this.saveFormVisible = false;
					}).catch(res => { // 请求失败
						this.$message.error("系统繁忙, 请稍后再试! [400, 404]")
						// 关闭添加或修改界面
						this.saveFormVisible = false;
					})
				} else { // 校验失败
					this.$message.error("校验未通过")
				}
			});
		},

		// 获取行数据的key
		getRowKeys(row) {
			return row.id
		},

	},

	// 钩子函数mounted (页面加载完成就会执行这个函数)
	mounted() {
		this.getTableData();
	}
}

</script>

<!-- css样式 -->
<style scoped></style>
